<template>
    <div>
        <Swiper
            :modules="[Autoplay, EffectCreative]"
            :slides-per-view="1"
            :loop="true"
            :effect="'creative'"
            :autoplay="{
                delay: 3000,
                disableOnInteraction: true
            }"
            :creative-effect="{
                prev: {
                    shadow: false,
                    translate: ['-20%', 0, -1]
                },
                next: {
                    translate: ['100%', 0, 0]
                }
            }"
            v-bind="options"
        >
            <SwiperSlide v-for="(item, index) in slideList" :key="index" :style="styleOptions">
                <img v-if="options.type !== 'template'" :src="'img/home/' + item + '.jpeg'" class="swapper-content" />
                <slot v-else :obj="item"></slot>
            </SwiperSlide>
            <SwiperControls />
        </Swiper>
    </div>
</template>
<script setup lang="ts">
    import { defineProps, PropType, computed } from 'vue'
    import { EffectCreative, Autoplay } from 'swiper/modules'
    const props = defineProps({
        dataList: {
            type: Array as PropType<string[]>,
            require: true,
            default: () => []
        },
        styleOptions: {
            type: Object as PropType<any>,
            require: false,
            default: () => ({})
        },
        options: {
            type: Object as PropType<any>,
            require: false,
            default: () => ({})
        }
    })
    const slideList = computed(() => props.dataList)
</script>

<style scoped>
    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        /* height: 600px; */
        font-size: 4rem;
        font-weight: bold;
        font-family: 'Roboto', sans-serif;
    }
    .swapper-content {
        vertical-align: bottom;
        max-width: 100%;
    }
</style>
